<template>
  <div class="echa-easy-pie2">
    <v-chart :auto-resize="true"
             :options="option" @click="pie2Click" />
  </div>
</template>
<script lang="ts">
import { EChartOption } from "echarts";
import { Component, Prop, Vue, Watch } from "vue-property-decorator";

@Component({
  components: {},
})
export default class echaEasyBar extends Vue {
  @Prop({ default: () => [] })
  dataList: Array<any> | undefined;
  @Prop({ default: () => "" })
  pieColor?: string | "";
  @Prop({ default: () => "" })
  sum;

  // 饼图定义
  public option: EChartOption = {
    title: {
      text: "累计",
      top: "20%",
      textAlign: "center",
      left: "47%",
      textStyle: {
        color: this.pieColor,
        fontSize: 12,
      },
      subtext: "",
      subtextStyle: {
        color: "#fff",
        fontSize: 25,
      },
    },
    tooltip: {
      trigger: "item",
      axisPointer: {
        type: "shadow",
      },
    },
    series: [
      {
        name: "",
        type: "pie",
        clockwise: false,
        radius: ["80%", "100%"],
        hoverAnimation: false,
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        data: [],
        z: 3,
      },
      {
        name: "",
        type: "pie",
        radius: ["82%", "98%"],
        hoverAnimation: false,
        itemStyle: {
          color: "#0C2A48",
        },
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        data: [1],
      },
      // {
      //   name: "",
      //   type: "pie",
      //   radius: ["65%", "75%"],
      //   hoverAnimation: false,
      //   itemStyle: {
      //     color: "#0C2A48",
      //   },
      //   label: {
      //     show: false,
      //   },
      //   labelLine: {
      //     show: false,
      //   },
      //   data: [1],
      // },
    ],
  };

  @Watch("dataList", { immediate: true, deep: true })
  getDataData(val: any) {
    console.log(val);
    
    (this as any).option.series[0].data = val.map((k: any, i: number) => {
      let res = {
        name: k.name,
        value: k.value,
        itemStyle: {
          color: (k.name === "正常"||k.name ==="已确认" )? this.pieColor : "#f06906",
          shadowBlur: 2,
          shadowColor: this.pieColor,
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
        },
      };
      (this as any).option.title.subtext = (this as any).sum;
      return res;
    });
  }

  @Watch("sum", { deep: true })
  sumData(val: any) {
      (this as any).option.title.subtext = this.sum;
  }
  // 图表页面适配
  public autoFit(): void {
    let innerwidth: number = window.innerWidth;
    // 1. 适配1440*900
    if (innerwidth <= 1440) {
      (this as any).option.title.subtextStyle.fontSize = 18;
    }
  }
  pie2Click(val){
    console.log(val);
    if (val.name=='正常') {
      this.$emit('handleClick','zc')
    }
     if (val.name=='异常') {
      this.$emit('handleClick','yc')
    }
     if (val.name=='已确认') {
      this.$emit('handleClick','yqr')
    }
     if (val.name=='未确认') {
      this.$emit('handleClick','wqr')
    }

    
  }
  private mounted(): void {
    // console.log("sum:",this.sum);
    this.autoFit();
  }
}
</script>
<style lang="scss" scoped>
.echa-easy-pie2 {
  width: 100%;
  height: 100%;
  .echarts {
    width: 100%;
    height: 100%;
  }
}
</style>
